<template>
    <div>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="id" label="ID" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <el-table-column label="操作">
                <template slot="header">
                    <el-button type="primary" icon="el-icon-plus" @click="addRow">添加</el-button>
                </template>
                <template slot="default" slot-scope="scope">
                    <el-button type="success" icon="el-icon-edit" @click="editRow(scope.row)">修改</el-button>
                    <el-button type="danger" icon="el-icon-delete" @click="deleteRow(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            tableData: []
        };
    },
    mounted() {
        this.getTableData();
    },
    methods: {
        // 获取表格数据
        getTableData() {
            axios.get('/tableData')
               .then(response => {
                    this.tableData = response.data;
                })
               .catch(error => {
                    console.error(error);
                });
        },
        // 添加表格数据
        addRow() {
            const newRow = {
                id: Date.now().toString(),
                name: '新姓名',
                age: 25,
                address: '新地址',
                createTime: new Date().toLocaleString()
            };
            axios.post('/addTableData', newRow)
               .then(response => {
                    if (response.code === 200) {
                        this.getTableData();
                    } else {
                        console.error(response.message);
                    }
                })
               .catch(error => {
                    console.error(error);
                });
        },
        // 修改表格数据
        editRow(row) {
            // 这里可以弹出一个对话框或者其他方式让用户修改数据，这里简单示例直接修改部分数据
            row.name = '修改后的姓名';
            axios.post('/updateTableData', row)
               .then(response => {
                    if (response.code === 200) {
                        this.getTableData();
                    } else {
                        console.error(response.message);
                    }
                })
               .catch(error => {
                    console.error(error);
                });
        },
        // 删除表格数据
        deleteRow(row) {
            axios.post('/deleteTableData', { id: row.id })
               .then(response => {
                    if (response.code === 200) {
                        this.getTableData();
                    } else {
                        console.error(response.message);
                    }
                })
               .catch(error => {
                    console.error(error);
                });
        }
    }
};
</script>